<template>
	<view class='main'>
		<view class="swiper">
			<wd-swiper :list="swiperList" autoplay v-model:current="swiperCur"></wd-swiper>
		</view>
		<view class="btn-group">
			<wd-card v-for="(item , index) in btnGroup" class="part" :key="index" :id="index">
				<view style="width: 100%;height: 100%;display: flex;justify-content: space-between;"
					@click="handleJump(item.jumpSrc)">
					<wd-img :width="20" :height="20" :src="item.imgSrc"></wd-img>
					<view class="title">
						{{item.title}}
					</view>
				</view>
			</wd-card>
		</view>
		<view class="content middle">
			<wd-card>
				<template #title>
					<view class="title">
						<view style="font-weight: bold;">功能服务</view>
						<view style="font-size: small;color: gray">更多
							<wd-icon name="arrow-right" size="18px"></wd-icon>
						</view>
					</view>
				</template>
				<view class="serveList">
					<view class="serveItem" v-for="(item , index) in serveGroup" :key="index"
						@click="handleJump(item.jumpSrc)">
						<wd-img :width="40" :height="40" :src="item.imgSrc"></wd-img>
						<view class="title">
							{{item.title}}
						</view>
					</view>
				</view>
			</wd-card>
		</view>
		<view class="content bottom">
			<wd-card>
				<my-notice></my-notice>
				<view class="cardlist">
					<view class="card" v-for="(item , index) in cardList" :key="index"
						@click="handleJump(item.jumpSrc)">
						<view class="text">
							<h3 style="color: black;font-weight: bold;">{{item.title}}</h3>
							<view>{{item.subTitle}}</view>
						</view>
						<view>
							<wd-img :width="80" :height="60" :src="item.imgSrc"></wd-img>
						</view>
					</view>
				</view>
			</wd-card>
		</view>

		<view class="content activity">
			<wd-card>
				<template #title>
					<view class="title">
						<view style="font-weight: bold;">通知公告</view>
						<view style="font-size: small;color: gray"
							@click="handleJump('/pages/servers/NoticsList/NoticsList')">更多
							<wd-icon name="arrow-right" size="18px"></wd-icon>
						</view>
					</view>
				</template>
				<view class="ListItem" v-for="(item , index) in announcements.slice(0, 3)" :key="index">
					<view class="itemTitle">
						{{item.title}}
					</view>
					<view class="itemDate">
						{{item.time}}
					</view>
					<wd-icon name="arrow-right" size="18px" @click="viewDetails(item)"></wd-icon>
				</view>
			</wd-card>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useNoticeStore
	} from "../../stores/notice";

	const {
		updateInfo
	} = useNoticeStore()

	function handleJump(jumpSrc) {
		uni.navigateTo({
			//保留当前页面，跳转到应用内的某个页面
			url: jumpSrc
		})
	}

	let swiperCur = ref < Number | String | Boolean > (0)

	const swiperList = ref([])
	const btnGroup = [{
		title: '社区活动',
		imgSrc: "/static/icon/7.png",
		jumpSrc: "/pages/servers/Activities/Activities"
	}, {
		title: '家庭成员',
		imgSrc: "/static/icon/2.png",
		jumpSrc: "/pages/servers/FamilyMembers/FamilyMembers"
	}, {
		title: '访客预约',
		imgSrc: "/static/icon/3.png",
		jumpSrc: "/pages/servers/VisitorReservation/VisitorReservation"
	}]
	const serveGroup = [{
			title: '生活缴费',
			imgSrc: "/static/icon/1.png",
			jumpSrc: "/pages/servers/LifePay/LifePay"
		},
		{
			title: '停车缴费',
			imgSrc: "/static/icon/5.png",
			jumpSrc: "/pages/servers/ParkPay/ParkPay"
		},
		{
			title: '预约服务',
			imgSrc: "/static/icon/9.png",
			jumpSrc: "/pages/servers/ServiceAppoint/ServiceAppoint"
		},
		{
			title: '居民通行证',
			imgSrc: "/static/icon/8.png",
			jumpSrc: "/pages/servers/Permit/Permit"
		},
	]
	const cardList = [{
			title: '报事报修',
			subTitle: '一键维修',
			imgSrc: '/static/insert/new1.png',
			jumpSrc: "/pages/servers/Repair/Repair"
		},
		{
			title: '联系物业',
			subTitle: '一键搞定',
			imgSrc: '/static/insert/new2.png',
			jumpSrc: "/pages/servers/CallProperty/CallProperty"
		}
	]

	const announcements = ref([{
			title: '小区停水通知',
			time: '2024-11-24 10:00',
			preview: '由于管道维修，预计11月25日停水，请大家提前储备用水。',
			details: '详细内容：因管道老化......'
		},
		{
			title: '垃圾分类培训',
			time: '2024-11-23 14:00',
			preview: '社区将于11月26日举办垃圾分类知识培训，欢迎大家参加！',
			details: '详细内容：为提升居民......'
		},
		{
			title: '宠物管理规定',
			time: '2024-11-22 18:30',
			preview: '请各位居民遵守新的宠物管理规定，以维护社区环境。',
			details: '详细内容：根据最新社区......'
		}
	]);
	const viewDetails = (announcement) => {
		// 处理查看详细逻辑，可以跳转到详情页或者弹出 Modal
		// console.log('查看详情:', announcement.details);
		updateInfo(announcement)
		handleJump('/pages/servers/Notics/Notics')
	};
</script>

<style lang="less">
	.main {
		background-color: rgb(238, 238, 238);
		padding: 2vw;
	}

	.btn-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
		margin: 5px 0;

		.wd-card__title-content,
		.wd-card__footer {
			display: none !important;
		}

		.wd-card__content {
			display: flex !important;
			background-color: white;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
		}
	}

	.content {
		margin-bottom: 7px;
	}

	.content.middle {
		.title {
			display: flex !important;
			justify-content: space-between;
			align-items: center;
		}

		.serveList {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 5px;

			.serveItem {
				display: flex !important;
				flex-direction: column;
				align-items: center;

				.title {
					margin-top: 5px;
				}
			}
		}
	}

	.content.bottom {

		.wd-card__title-content {
			display: none !important;
		}

		.wd-card__content {
			padding: 10px 0;
		}

		.wd-card__footer {
			display: none !important;
		}

		.cardlist {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
			margin-top: 10px;

			.card {
				display: flex;
				background-color: rgb(238, 238, 238);
				padding: 5px 10px;
				justify-content: space-between;

				.text {
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
		}

	}

	.content.activity {
		.title {
			display: flex !important;
			justify-content: space-between;
			align-items: center;
		}

		.ListItem {
			display: grid;
			grid-template-columns: 7fr 3fr 0.5fr;
			align-items: center;
			border-top: 1px solid rgb(238, 238, 238);
			padding: 5px 0 5px 18px;

			.itemTitle,
			.itemDate {
				// text-justify: center;
			}

			.itemDate {
				width: 32vw;
			}
		}
	}

	.wd-card {
		margin: 0 !important;
	}
</style>